import React, { useEffect, useState } from "react";
import axios from "axios";
import { Col, Row, Space, Button, Input } from "antd";
import { throttle } from "lodash";
import "./style.scss";

interface CarState {
  price: number;
  type: string;
  score: number;
  name: string;
  url: string;
  id: string;
}

const Index = () => {
  const [car, setCar] = useState<CarState[]>([]);
  const [pageCode, setPageCode] = useState(1);
  const [price, setPrice] = useState("a");
  const [type, setType] = useState("不限");
	const [desc, setDesc] = useState('') 
	const [value, setValue] = useState('')

  const priceList = [
    {
      name: "不限",
      value: "a",
    },
    {
      name: "0-5万",
      value: "b",
    },
    {
      name: "5-10万",
      value: "c",
    },
    {
      name: "10-20万",
      value: "d",
    },
    {
      name: "20-50万",
      value: "e",
    },
    {
      name: "50万+",
      value: "f",
    },
  ];
  const typeList = ["不限", "轿车", "跑车", "SUV", "青客", "卡车"];
	const descList = [{
		name: '价格降序',
		value: 'a'
	},{
		name: '价格升序',
		value: 'b'
	},{
		name: '评分降序',
		value: 'c'
	},{
		name: '评分升序',
		value: 'd'
	}]
  const fetchCar = async () => {
    const resp = await axios.get("/api/car", {
      params: {
        pageCode,
        price,
				type,
				desc,
				value
      },
    });
    setCar([...car, ...resp.data.data]);
  };

  const scroll = () => {
    const a = document.documentElement.scrollTop;
    const b = document.documentElement.clientHeight;
    const c = document.documentElement.scrollHeight;
    if (a + b >= c - 100) {
      setPageCode(pageCode + 1);
    }
  };

  useEffect(() => {
    fetchCar();

    document.addEventListener("scroll", scroll);
    return () => {
      document.removeEventListener("scroll", scroll);
    };
  }, [pageCode, price, type, desc, value]);

  return (
    <div>
			<Input value={ value } onChange={ e => {
				setCar([])
				setValue(e.target.value)
			} }></Input>
      <div>
        <div className="fitler-item">
          <span>单价：</span>
          <Space>
            {priceList.map((v, i) => {
              return (
                <Button
                  type={v.value === price ? "primary" : "default"}
                  onClick={() => {
                    setCar([]);
                    setPageCode(1);
                    setPrice(v.value);
                  }}
                  key={i}
                >
                  {v.name}
                </Button>
              );
            })}
          </Space>
        </div>
				<div className="fitler-item">
          <span>类型：</span>
          <Space>
            {typeList.map((v, i) => {
              return (
                <Button
                  type={v === type ? "primary" : "default"}
                  onClick={() => {
                    setCar([]);
                    setPageCode(1);
                    setType(v);
                  }}
                  key={i}
                >
                  {v}
                </Button>
              );
            })}
          </Space>
        </div>

				<div className="fitler-item">
          <span>类型：</span>
          <Space>
            {descList.map((v, i) => {
              return (
                <Button
                  type={v.value === desc ? "primary" : "default"}
                  onClick={() => {
                    setCar([]);
                    setPageCode(1);
                    setDesc(v.value);
                  }}
                  key={i}
                >
                  {v.name}
                </Button>
              );
            })}
          </Space>
        </div>
      </div>
      <Row>
        {car.map((v) => {
          return (
            <Col span={6} key={v.id}>
              <dl className="car-item">
                <dt>
                  <img src={v.url} alt="" />
                </dt>
                <dd>
                  <h3>{v.name}</h3>
                  <p>单价： {v.price}---评分： { v.score }</p>
                  <p>{v.type}</p>
                </dd>
              </dl>
            </Col>
          );
        })}
      </Row>
    </div>
  );
};

export default Index;
